<template>
  <div v-show="visible" class="detail-container w-full h-full absolute top-0 left-0 z-3">
    <BasicDetail v-bind="getBindValues" @close="closeHandler">
      <BasicTitle>修改公文</BasicTitle>

      <div class="h-full content px-6 flex flex-col overflow-y-scroll"> </div>
    </BasicDetail>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, watchEffect, useAttrs, unref } from 'vue';
  import { BasicDetail } from '/@/components/Detail';
  import { BasicTitle } from '/@/components/Basic';

  const props = defineProps({
    visible: Boolean,
  });

  const emit = defineEmits(['update:visible', 'success']);

  const attrs = useAttrs();

  const loading = ref(false);
  const visibleRef = ref(false);

  const getBindValues = computed(() => {
    const values = {
      ...attrs,
      visible: unref(visibleRef),
      loading: loading.value,
    };
    return values;
  });

  watchEffect(() => {
    visibleRef.value = !!props.visible;
  });

  function closeHandler() {
    emit('update:visible', false);
  }
</script>
<style lang="less" scoped></style>
